import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import "."
Item {
    id: window
    visible: true
    width: 800
    height: 600

    // 定义页面配置数据（只包含基本类型属性）
    ListModel {
        id: pageConfigModel
        ListElement { icon: "🔍"; title: "首页"; color: "#2196F3"; qmlFile: "Test1.qml" }
        ListElement { icon: "📊"; title: "数据分析"; color: "#4CAF50"; qmlFile: "Test2.qml" }
        ListElement { icon: "⚙️"; title: "设置"; color: "#FF9800"; qmlFile: "Test1.qml" }
        // ListElement { icon: "📝"; title: "笔记"; color: "#F44336"; qmlFile: "NotesPage.qml" }
    }

    // 页面实例列表
    property var pageInstances: []

    property int currentPageIndex: 0

    // 创建所有页面实例
    Component.onCompleted: {
        for (var i = 0; i < pageConfigModel.count; i++) {
            console.log("This is a log message ",i);
            var config = pageConfigModel.get(i);
            var component = Qt.createComponent(config.qmlFile);

            if (component.status === Component.Ready) {
                var page = component.createObject(null);
                pageInstances.push({
                    config: config,
                    instance: page
                });

                console.log(pageInstances.length)
                console.log("pageStack.depth ",pageStack.depth)
            } else {
                console.error("Failed to load component:", config.qmlFile);
            }
        }
    }

    // 主布局
    RowLayout {
        anchors.fill: parent

        // 侧边栏
        Rectangle {
            id: sidebar
            width: 200
            height: parent.height
            color: "#2C3E50"
            radius: 5

            Column {
                anchors.fill: parent
                spacing: 2

                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#34495E"
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("导航菜单")
                        color: "white"
                        font.bold: true
                        font.pointSize: 14
                    }
                }

                Repeater {
                    model: pageConfigModel

                    Rectangle {
                        id: navItem
                        width: parent.width
                        height: 50
                        color: (index === currentPageIndex) ? model.color : "transparent"
                        border.color: (index === currentPageIndex) ? "white" : "transparent"
                        border.width: 1

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                currentPageIndex = index;
                                showPage(index);
                            }
                        }

                        Row {
                            anchors.centerIn: parent
                            spacing: 10
                            Text {
                                text: model.icon
                                font.pointSize: 16
                                color: "white"
                            }
                            Text {
                                text: model.title
                                color: "white"
                                font.pointSize: 12
                            }
                        }

                    }
                }
            }
        }

        // 页面内容区域
        StackView {
            id: pageStack
            Layout.fillWidth: true
            Layout.fillHeight: true
            pushEnter: null
            pushExit: null
            popEnter: null
            popExit: null
            replaceEnter: null
            replaceExit: null
        }
    }

    // 显示指定索引的页面
    function showPage(index) {
        var page = pageInstances[index].instance;
        pageStack.popCurrentItem()
        pageStack.push(page)
    }
}
